<template>
  <el-dialog title="请选择进项明细" v-drag2anywhere :visible.sync="dialogVisible" width="1500px" :close-on-click-modal="false"
    append-to-body :modal-append-to-body="false" @close="dialogVisible=false">

    <el-form :model="filterData" ref="filterForm" label-width="0">
      <el-row :gutter="20">
        <el-col  style="width: 240px;">
          <el-form-item label="">
            <el-input v-model="filterData.num" placeholder="进项发票号码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="">
            <el-input v-model="filterData.title" placeholder="产品名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="">
            <el-input v-model="filterData.model" placeholder="规格型号" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 240px;">
          <el-form-item label="">
            <el-input v-model="filterData.supname" placeholder="供应商名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 100px;">
          <el-form-item label="">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div style="height: 400px; overflow-y: auto;border: 1px solid #E3E3E3; border-top: none;">
          <el-table :data="tableData" ref="tableData" border style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column label="选择" type="selection" width="60px" align="center"></el-table-column>
            <el-table-column label="开票日期" prop="date" width="140px"></el-table-column>
            <el-table-column label="进项票号" prop="num" width="140px"></el-table-column>
            <el-table-column label="税收类目" prop="taxname" width="100px" show-overflow-tooltip></el-table-column>
            <el-table-column label="货物名称或服务名称" prop="title" width="150px" show-overflow-tooltip></el-table-column>
            <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
            <el-table-column label="单位" prop="unit" width="60" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="数量" prop="count" width="60" align="center"></el-table-column>
            <el-table-column label="单价" prop="price" align="right" width="80px" show-overflow-tooltip></el-table-column>
            <el-table-column label="金额" prop="total" align="center" width="100px"></el-table-column>
            <el-table-column label="税额" prop="tax" align="center" width="100px"></el-table-column>
            <el-table-column label="价税合计" prop="sum" align="center" width="100px"></el-table-column>

            <el-table-column label="发票类型" prop="type" width="120px">         </el-table-column>

            <el-table-column label="供应商" prop="seller" show-overflow-tooltip></el-table-column>
          </el-table>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;">
      <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
        :current-page="curpage" prev-text="上一页"  next-text="下一页"  :page-sizes="[10, 20, 30]" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selection.length<=0">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default{
    data(){
      return{
        filterData:{
          title:'',
          num:'',
          model:'',
          supname:''
        },
        numrows:1,
        curpage:1,
        pagesize:10,
        selection:[],
        tableData:[],
        dialogVisible:false
      }
    },
    methods:{
      initData(){
        this.filterData={
          title:'',
          num:'',
          model:'',
          supname:''
        },
        this.loadDataList();
      },
      handleSelectionChange(selection){
        this.selection=selection;

      },
      loadDataList(){
        const params={
          title:this.filterData.title,
          model:this.filterData.model,
          num:this.filterData.num,
          supname:this.filterData.supname,
          curpage:this.curpage,
          pagesize:this.pagesize
        }
        this.axios.post("api/admin/buyticketdetail/popup_buyticket_unsoldout", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows=res.data.numrows;
          }
        })
      },
      handleSearch(){
        this.curpage=1;
        this.loadDataList();
      },
      handleSave(){
          this.$emit("completeHandler",this.selection);
          this.dialogVisible=false;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
    }
  }
</script>

<style>
</style>
